﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="practice1.aspx.cs" Inherits="BackboneJs_practice1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-2.0.0.min.js" type="text/javascript"></script>
    <script src="../../Scripts/underscore.js" type="text/javascript"></script>
    <script src="../../Scripts/backbone.js" type="text/javascript"></script>
    <style>
        .rectangle
        {
            border: 1px black solid;
            position: absolute;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="canvas">
    </div>
    </form>
    <script type="text/javascript">

        (function () {
            var Rectangle = Backbone.Model.extend({});

            var RectangleView = Backbone.View.extend({
                tagName: 'div',
                className: 'rectangle',

                events: {
                    click: 'move'
                },

                render: function () {
                    this.setDimensions();
                    this.setPosition();
                    this.setColor();
                    return this;
                },

                setDimensions: function () {
                    this.$el.css({
                        width: this.model.get('width') + 'px',
                        height: this.model.get('height') + 'px'
                    });
                },

                setPosition: function () {

                    var position = this.model.get('position');

                    this.$el.css({
                        left: position.x,
                        top: position.y
                    });
                },

                setColor: function () {
                    this.$el.css('background-color', this.model.get('color'));
                },

                move: function () {

                    this.$el.css('left', this.$el.position().left + 10);
                }
            });


            var models =
            [new Rectangle({
                width: 100,
                height: 60,
                position: { x: 300, y: 150 },
                color: 'Red'
            }), new Rectangle({
                width: 40,
                height: 90,
                position: { x: 20, y: 150 },
                color: 'Yellow'
            }), new Rectangle({
                width: 100,
                height: 60,
                position: { x: 300, y: 300 },
                color: 'Green'
            })];

            _(models).each(function (model) {
                
                $('div#canvas').append(new RectangleView({ model: model }).render().el);

            });

        })();

    </script>
</body>
</html>
